<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <input type="text" name="name" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">父级</label>
                <div class="layui-input-block">
                    <div id="pid" name="pid" value="0"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限</label>
                <div class="layui-input-block">
                    <div id="rules" name="rules" value="0"></div>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(["jquery", "xmSelect", "form"], function () {

        // 父级
        layui.$.post("{:route('admin.adminRoles.query')}", { limit: 1000 }, function (res) {
            layui.xmSelect.render({
                el: "#pid",
                name: "pid",
                initValue: [0],
                tips: "无",
                toolbar: { show: true, list: ["CLEAR"] },
                data: res.data,
                model: { "icon": "hidden", "label": { "type": "text" } },
                clickClose: true,
                radio: true,
                tree: { show: true, "strict": false, "clickCheck": true, "clickExpand": false, expandedKeys: [] },
                prop: {
                    value: "id"
                }
            });
        })

        // 权限
        layui.$.get("{:route('admin.adminRoles.get_role')}", function (res) {
            layui.xmSelect.render({
                el: "#rules",
                name: "rules",
                toolbar: { show: true, list: ["CLEAR"] },
                data: res.data,
                tree: {
                    //是否显示树状结构
                    show: true,
                },
                prop: {
                    name: 'title',
                }
            })
        })

    })
</script>